<template>
    <div style="border: 0px solid  red;display: flex;justify-content: center;padding: 20px">
        <div style="border:0px solid blueviolet;">
            <div>
                <h1>训练结果展示</h1>
                <h3 >测试集的均方误差是:{{mse_score}}</h3>
                <h3>测试集的平方绝对误差是:{{mae_score}}</h3>
            </div>
            <div style="display: flex;">
                <template v-for="item in images">
                   <div style="flex: 1">
                       <img :src="item" style="width: 100%">
                   </div>
                </template>
            </div>
        </div>
    </div>
</template>
<script setup>
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";

const route = useRoute()
let images = ref([])
let mae_score=ref(null)
let mse_score=ref(null)
onMounted(() => {
    if (route.query.type == "cnn-draw") {
        let obj = JSON.parse(localStorage.getItem("cnn-draw"))
        console.log(obj.data.imgUrls)
        images.value=obj.data.imgUrls.map((v)=>{return 'data:image/png;base64,'+v})
        mae_score.value=obj.data.mae_score
        mse_score.value=obj.data.mse_score
        console.log('>>>>>>>>>>>>>>>obj', obj)
    }

    if (route.query.type == "lstm-draw") {
        let obj = JSON.parse(localStorage.getItem("lstm-draw"))
        console.log(obj.data.imgUrls)
        images.value=obj.data.imgUrls.map((v)=>{return 'data:image/png;base64,'+v})
        console.log('>>>>>>>>>>>>>>>obj', obj)
        mae_score.value=obj.data.mae_score
        mse_score.value=obj.data.mse_score
    }
})
</script>
<style scoped>

</style>
